<template>
	<view class="outboundStyle">
		<view class="topSearch">
			<u-search placeholder="日照香炉生紫烟" v-model="keyword" :animation="false" :showAction="false"></u-search>
		</view>
		<view v-if="tabbarValue == 0">
			<view class="outbound_tab">
				<tabcut @tab="changeBtnOK" :Cuts="applyFor" :scrollable="false" :lineWidth="50"></tabcut>
			</view>

			<view v-if="active == 1" class="changeLeft_style">
				<scroll-view scroll-y="true" enable-back-to-top="true" lower-threshold="112" class="scrollbox">
					<ForWhole></ForWhole>
				</scroll-view>
			</view>
			<view v-else-if="active == 2" class="changeLeft_style">
				<scroll-view scroll-y="true" enable-back-to-top="true" lower-threshold="112" class="scrollbox">
					<ForApprove></ForApprove>
					我的申请-憨批3
				</scroll-view>
			</view>
			<view v-else-if="active == 3" class="changeLeft_style">
				<scroll-view scroll-y="true" enable-back-to-top="true" lower-threshold="112" class="scrollbox">
					<ForPass></ForPass>
					我的申请-已通过3
				</scroll-view>
			</view>
			<view v-else="active == 4" class="changeLeft_style">
				<scroll-view scroll-y="true" enable-back-to-top="true" lower-threshold="112" class="scrollbox">
					<ForPass></ForPass>
					我的申请-已驳回3
				</scroll-view>
			</view>
		</view>
		<view v-if="tabbarValue == 1">
			<view class="outbound_tab">
				<tabcut @tab="changeBtnOK" :Cuts="examine" :scrollable="false" :lineWidth="50"></tabcut>
			</view>

			<view v-if="active == 1" class="changeLeft_style">
				<scroll-view scroll-y="true" enable-back-to-top="true" lower-threshold="112" class="scrollbox">
					<PerWhole></PerWhole>
					我的审批-全部2
				</scroll-view>
			</view>
			<view v-else-if="active == 2" class="changeLeft_style">
				<scroll-view scroll-y="true" enable-back-to-top="true" lower-threshold="112" class="scrollbox">
					<PerApprove></PerApprove>
					我的审批-待审批2
				</scroll-view>
			</view>
			<view v-else-if="active == 3" class="changeLeft_style">
				<scroll-view scroll-y="true" enable-back-to-top="true" lower-threshold="112" class="scrollbox">
					<PerPass></PerPass>
					我的审批-已通过2
				</scroll-view>
			</view>
			<view v-else="active == 4" class="changeLeft_style">
				<scroll-view scroll-y="true" enable-back-to-top="true" lower-threshold="112" class="scrollbox">
					<PerReject></PerReject>
					我的审批-已驳回2
				</scroll-view>
			</view>
		</view>
		<view v-if="tabbarValue == 2">
			<view class="outbound_tab">
				<tabcut @tab="changeBtnOK" :Cuts="operate" :scrollable="false" :lineWidth="50"></tabcut>
			</view>

			<view v-if="active == 1" class="changeLeft_style">
				<scroll-view scroll-y="true" enable-back-to-top="true" lower-threshold="112" class="scrollbox">
					<ExaWhole></ExaWhole>
					我的操作-全部1
				</scroll-view>
			</view>
			<view v-else-if="active == 2" class="changeLeft_style">
				<scroll-view scroll-y="true" enable-back-to-top="true" lower-threshold="112" class="scrollbox">
					<ExaApprove></ExaApprove>
					我的操作-未开始1
				</scroll-view>
			</view>
			<view v-else-if="active == 3" class="changeLeft_style">
				<scroll-view scroll-y="true" enable-back-to-top="true" lower-threshold="112" class="scrollbox">
					<ExaPass></ExaPass>
					我的操作-进行中1
				</scroll-view>
			</view>
			<view v-else="active == 4" class="changeLeft_style">
				<scroll-view scroll-y="true" enable-back-to-top="true" lower-threshold="112" class="scrollbox">
					<ExaReject></ExaReject>
					我的操作-已结束1
				</scroll-view>
			</view>
		</view>
		<u-tabbar :value="tabbarValue" @change="tabbarChange" :fixed="true" :placeholder="false" :safeAreaInsetBottom="false">
			<u-tabbar-item text="我的申请" icon="home" @click="tabbarChange"></u-tabbar-item>
			<u-tabbar-item text="我的审批" icon="photo" @click="tabbarChange"></u-tabbar-item>
			<u-tabbar-item text="我的操作" icon="play-right" @click="tabbarChange"></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
import tabcut from '@/components/Tabcut.vue';
// For => 我的申请
import ForWhole from './components/applyFor/whole.vue';
import ForApprove from './components/applyFor/approve.vue';
import ForPass from './components/applyFor/pass.vue';
import ForReject from './components/applyFor/reject.vue';
// Exa => 我的操作
import ExaWhole from './components/examine/whole.vue';
import ExaApprove from './components/examine/approve.vue';
import ExaPass from './components/examine/pass.vue';
import ExaReject from './components/examine/reject.vue';
// Per => 我的审批
import PerWhole from './components/operate/whole.vue';
import PerApprove from './components/operate/approve.vue';
import PerPass from './components/operate/pass.vue';
import PerReject from './components/operate/reject.vue';
export default {
	components: {
		tabcut,
		// For => ""申 请"""""
		ForWhole, //   全部
		ForApprove, //   审批
		ForPass, //   通过
		ForReject, //   驳回

		// Exa => """操  作""""""""""
		ExaWhole, //   全部
		ExaApprove, //   审批
		ExaPass, //   通过
		ExaReject, //   驳回

		// Per => ""审   批"""""
		PerWhole, //   全部
		PerApprove, //   审批
		PerPass, //   通过
		PerReject //   驳回
	},
	data() {
		return {
			tabbarValue: 0,
			keyword: '',
			active: 1,
			applyFor: [
				{
					name: '全部',
					type: 1
				},
				{
					name: '待审批',
					type: 2
				},
				{
					name: '已通过',
					type: 3
				},
				{
					name: '已驳回',
					type: 4
				}
			],
			examine: [
				{
					name: '全部',
					type: 1
				},
				{
					name: '待审批',
					type: 2
				},
				{
					name: '已通过',
					type: 3
				},
				{
					name: '已驳回',
					type: 4
				}
			],
			operate: [
				{
					name: '全部',
					type: 1
				},
				{
					name: '未开始',
					type: 2
				},
				{
					name: '进行中',
					type: 3
				},
				{
					name: '已结束',
					type: 4
				}
			]
		};
	},
	methods: {
		tabbarChange(e) {
			this.tabbarValue = e;
		},
		changeBtnOK(e) {
			this.active = e.type;
		}
	}
};
</script>

<style scoped lang="scss">
.topSearch {
	padding: 10rpx;
	background: #fff;
}
.outbound_tab {
	background-color: #fff;
}
.scrollbox {
	height: calc(100vh - 324rpx);
}
</style>
